<template>
	<view class="content">
		<view class="null" v-if="messageList.length==0">
			暂无用户向您留言哦~~
		</view>
		<view class="message-item" v-for="(item,index) in messageList" :key="index">
			<view class="item-top">
				<view class="item-top-img">
					<image :src="item.photo_url"></image>
				</view>
				<view class="item-top-name">
					<view class="name">{{item.realname==null?item.nickname:item.realname}}</view>
					<view class="phone" @click="calling(item.phone)">{{item.phone}}</view>
				</view>
			</view>
			<view class="item-center">
				{{item.content}}
			</view>
			<view class="item-bottom">
				<view class="item-bottom-left">
					{{item.created_at}}
				</view>
				<view class="item-bottom-right">
					来自：{{item.to_name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageList: [],
				limit: 10,
				page: 1
			}
		},
		onShow() {
			this.getBusinessMessage();
		},
		onLoad() {
			
		},
		onPullDownRefresh(){
			this.page=1;
			this.messageList=[];
			this.getBusinessMessage()
		},
		onReachBottom(){
			this.page++;
			this.getBusinessMessage()
		},
		methods:{
			calling(phone){
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			async getBusinessMessage(){
				let params = {
					limit: this.limit,
					page: this.page,
					user_token: uni.getStorageSync('userToken')
				}
				const res = await this.$api.getBusinessMessage(params);
				if(res.data.level == 'success'){
					if(this.page == 1){
						this.messageList = res.data.data;
					}else{
						if(res.data.data.length==0){
							this.page--;
						}else{
							this.messageList = this.messageList.concat(res.data.data)
						}
					}
					
				}
			}
		}
	}
</script>

<style lang="scss">
	@import'~@/common/scss/common.scss';
	.content{
		
	}
	.null{
		padding: 50rpx 0;
		text-align: center;
		color: #a6a6a6;
		line-height: 50rpx;
	}
	.message-item{
		border-bottom: 2rpx solid #c1c1c1;
		.item-top{
			display: flex;
			flex-direction: row;
			padding: 10rpx 30rpx;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1rpx solid #e2e2e2;
			.item-top-img{
				width: 100rpx;
				height: 100rpx;
				overflow: hidden;
				border-radius: 360rpx;
				image{
					width: 100%;
					height: 100%;
				}
				margin-right: 20rpx;
			}
			.item-top-name{
				font-size: 28rpx;
				.name{
					line-height: 50rpx;
				}
				.phone{
					font-size: 24rpx;
					color: #009dec;
					line-height: 50rpx;
				}
			}
		}
		.item-center{
			padding: 30rpx;
			font-size: 32rpx;
			line-height: 50rpx;
		}
		.item-bottom{
			display: flex;
			flex-direction: row;
			padding: 10rpx 30rpx;
			justify-content: flex-start;
			align-items: center;
			font-size: 24rpx;
			color: #b9b9b9;
			.item-bottom-left{
				
			}
			.item-bottom-right{
				margin-left: auto;
				max-width: 50%;
				@include ellipsis(1);
			}
		}
	}
</style>
